<template>
	<view class="box">
		<view class="list">
			<view class="left">
				<image src="https://s1.ax1x.com/2022/11/27/zUZZuQ.png" mode=""></image>
				<text>头像</text>
			</view>
			<view class="right">
				<image @click="uploadImg" class="photo" :src="IMGURL+addData.photo" ></image>
				<!-- <image @click="uploadImg" class="photo" v-else src="https://s1.ax1x.com/2022/11/27/zUGk8J.png"></image> -->
				<image class="arrow" src="https://s1.ax1x.com/2022/11/27/zUZKNq.png" mode=""></image>
			</view>
		</view>
		<view class="list two">
			<view class="left">
				<image src="https://s1.ax1x.com/2022/11/27/zUuROS.png" mode=""></image>
				<text>昵称</text>
			</view>
			<view class="right">
				<input v-model="addData.name" type="text" placeholder="">
				<image class="arrow" src="https://s1.ax1x.com/2022/11/27/zUZKNq.png" mode=""></image>
			</view>
		</view>
		<view class="list three">
			<view class="left">
				<image src="https://s1.ax1x.com/2022/11/27/zUuhwQ.png" mode=""></image>
				<text>性别</text>
			</view>
			<view class="right">
				<picker :range="sexArr" @change="changeSex">
					<view>{{sexArr[addData.sex]}}</view>
				</picker>
				<image class="arrow" src="https://s1.ax1x.com/2022/11/27/zUZKNq.png" mode=""></image>
			</view>
		</view>
		<view class="list four" style="border-bottom: none;">
			<view class="left">
				<image src="https://s1.ax1x.com/2022/11/27/zUu4oj.png" mode=""></image>
				<text>手机号</text>
			</view>
			<view class="right" @click="uptel">
				<text v-model="mobile">{{mobile}}</text>
				<image class="arrow" src="https://s1.ax1x.com/2022/11/27/zUZKNq.png" mode=""></image>
			</view>
		</view>
		<view class="preserve" @click="getUser">
			保存
		</view>
	</view>
</template>

<script>
	import {
		IMG
	} from '../../utils/cofing.js'
	import {updataUser} from '../../utils/api.js'
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync("userInfo"),
				mobile: '',
				sexArr: ["男", "女"],
				addData: {
					name: '',
					photo: '',
					sex: 0,
				},
				IMGURL: IMG
			}
		},
		onLoad() {
			this.addData.photo = uni.getStorageSync('userInfo').photo
			this.mobile = uni.getStorageSync('userInfo').mobile
			this.addData.name  = uni.getStorageSync('userInfo').name
			this.addData.sex  = uni.getStorageSync('userInfo').sex
		},
		methods: {
			// 选择性别
			changeSex(e) {
				console.log(e);
				this.addData.sex = e.detail.value
			},
			// 修改头像
			async uploadImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log('图片临时路径',tempFilePaths);
						uni.uploadFile({
							url: 'http://estate.eshareedu.cn/estate/api/upload/add', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								console.log(res);
								if (res.errCode === 10000) {
									uni.showToast({
										title: '上传成功'
									})
									this.addData.photo = res.data
								}
							}
						});
					}
				});
			},
			// 修改个人资料
			 async getUser(){
				let res = await updataUser(this.addData)
				// console.log(res);
				if(res.errCode==10000){
					uni.setStorageSync("userInfo",res.data)
					uni.switchTab({
						url:'/pages/mine/mine'
					})
				}
			},
			// 修改手机号
			uptel(){
				uni.navigateTo({
					url:`../upmobile/upmobile?mobile=${this.mobile}`
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100vh;
		background-color: #f6f5f5;
	}

	.box {
		width: 100%;
		height: 450rpx;
		background-color: #fff;
	}

	.list {
		width: 720rpx;
		height: 109rpx;
		border-bottom: 1rpx solid #efefef;
		margin-left: 15rpx;
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			height: 100%;

			image {
				width: 33rpx;
				height: 33rpx;
				margin-right: 25rpx;
			}

			text {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.right {
			display: flex;
			align-items: center;
			height: 100%;

			.photo {
				width: 80rpx;
				height: 78rpx;
				margin-right: 25rpx;
				border-radius: 50%;
			}

			.arrow {
				width: 12rpx;
				height: 20rpx;
				margin-right: 35rpx;
			}
		}
	}

	.two {
		.left {
			image {
				width: 31rpx !important;
				height: 24rpx !important;
			}
		}

		.right {
			input {
				width: 60rpx;
				font-size: 24rpx;
				margin-right: 30rpx;
			}
		}
	}

	.three {
		.left {
			image {
				width: 33rpx;
				height: 27rpx;
			}
		}

		.right {
			view {
				margin-right: 30rpx;
				font-size: 24rpx;
			}
		}
	}

	.four {
		.left {
			image {
				width: 22rpx;
				height: 31rpx;
			}
		}

		.right {
			text {
				width: 160rpx;
				font-size: 24rpx;
				margin-right: 30rpx;
			}
		}
	}

	.preserve {
		width: 510rpx;
		height: 75rpx;
		background-color: #1f8fff;
		border-radius: 50rpx;
		margin-left: 120rpx;
		margin-top: 80rpx;
		text-align: center;
		line-height: 75rpx;
		color: #fff;
		font-size: 30rpx;
	}
</style>
